.fakeEmpty {
  min-height: 32px;
  text-align: center;
  display: none;
}
.fake .fakeEmpty {
  background: linear-gradient(-45deg, white 25%,
  #f3f5fa 25%, #f3f5fa 50%,
  white 50%, white 75%,
  #f3f5fa 75%);
  background-size: 45px 45px !important;
  background-repeat: repeat !important;
  font-size: 12px;
  color: var(--font-second-color);
}
.fakeRouter:empty + .fakeEmpty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tooltip {
  color: var(--brand-primary);
  margin-left: 4px;
  display: flex;
  align-items: center;
  padding: 0 4px;
  height: 22px;
  border: 1px solid #DADEE8;
  border-radius: 4px;
  cursor: pointer;
  transition: all 150ms;
  position: relative;
}

.tooltip:hover {
  border-color: var(--brand-primary);
  background-color: var(--brand-primary-lightest);
}

.tooltip:hover .tooltipContent {
  display: block;
}

.tooltip > span {
  white-space: nowrap;
}

.tooltipContent {
  width: 320px;
  position: absolute;
  left: -244px;
  top: 28px;
  background: #000;
  padding: 12px;
  border-radius: 4px;
  color: #fff;
  text-align: left;
  display: none;
  cursor: default;
}

.tooltipContent::before {
content: '';
position: absolute;
height: 6px;
top: -6px;
left: 0;
right: 0;
}

.tooltipContent::after {
content: '';
position: absolute;
width: 8px;
height: 8px;
top: -4px;
right: 32px;
background-color: #000;
transform: rotate(45deg);
}

.tooltipIcon {
background: url(./assets/info.png) no-repeat;
background-size: cover;
width: 16px;
height: 16px;
margin-right: 2px;
}

.tipImg {
  background: url(./assets/bg.png) no-repeat;
  background-size: cover;
  width: 100%;
  height: 150px;
  margin-top: 8px;
  border-radius: 4px;
}
